<template>
  <div class="wrapper">
    <span class="tit">高级筛选条件：</span>
    <div class="left-wrap" ref="leftWrap">
      <ul
        class="list cursor-pointer"
        ref="list"
        :style="{ transform: 'translateX(' + translateX + 'px)' }"
        @mousemove="mousemove"
        @mousedown="mousedown"
        @mouseup="mouseup"
      >
        <li
          v-for="(item, index) in showObj.form"
          :key="index"
          class="list-item"
        >
          <span v-if="item.formType == 'date'">{{
            item.name + "&nbsp;“" + item.value[0] + "-" + item.value[1] + "”"
          }}</span>
          <span v-else-if="item.formType === 'datetime'">{{
            item.name + "&nbsp;“" + item.value[0] + "-" + item.value[1] + "”"
          }}</span>
          <span v-else-if="item.formType === 'business_type'">{{
            item.name +
              "&nbsp;“" +
              getTypesName(item) +
              getStatusName(item) +
              "”"
          }}</span>
          <span v-else-if="item.formType === 'map_address'">{{
            `${item.name} ${item.address.state} ${item.address.city} ${
              item.address.area
            }`
          }}</span>
          <span v-else-if="item.formType === 'checkStatus'">{{
            item.name +
              "&nbsp;“" +
              optionsNames[item.condition] +
              "”" +
              "&nbsp;" +
              getNameValue(item)
          }}</span>
          <span v-else-if="item.formType === 'dealStatus'">{{
            item.name +
              "&nbsp;“" +
              optionsNames[item.condition] +
              "”" +
              "&nbsp;" +
              getDealStatus(item.value)
          }}</span>
          <span
            v-else-if="
              item.formType === 'user' || item.formType === 'single_user'
            "
            >{{
              item.name +
                "&nbsp;" +
                optionsNames[item.condition] +
                "“" +
                item.value[0].realname +
                "”"
            }}</span
          >
          <span v-else-if="item.formType === 'structure'">{{
            item.name +
              "&nbsp;" +
              optionsNames[item.condition] +
              "“" +
              item.value[0].name +
              "”"
          }}</span>
          <span
            v-else-if="item.formType === 'category' && item.value.length > 0"
            >{{ item.name + "&nbsp;“" + item.valueContent + "”" }}</span
          >
          <span
            v-else-if="
              item.formType === 'select' &&
                getSettingValueType(item.setting) != 'string'
            "
            >{{ item.name + "&nbsp;“" + getNameValue(item) + "”" }}</span
          >
          <span v-else-if="item.formType === 'user_mul'">{{
            item.name + "&nbsp;“" + getUserName(item.valueContent) + "”"
          }}</span>
          <span v-else-if="item.formType === 'structure_mul'">{{
            item.name + "&nbsp;“" + getStrucName(item.valueContent) + "”"
          }}</span>
          <span v-else-if="item.formType === 'leve_linkage'">{{
            item.name + "&nbsp;“" + item.valueContent + "”"
          }}</span>
          <span v-else>{{
            item.name +
              "&nbsp;" +
              optionsNames[item.condition] +
              "“" +
              item.value +
              "”"
          }}</span>
          <i class="el-icon-close icon" @click="handleDelete(item, index)" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "FilterContent",
  props: {
    obj: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      // 获取条件名称
      optionsNames: {
        is: "等于",
        in: "等于",
        isNot: "不等于",
        contains: "包含",
        notContains: "不包含",
        startWith: "开始于",
        endWith: "结束于",
        isNull: "为空",
        isNotNull: "不为空",
        eq: "等于",
        neq: "不等于",
        gt: "大于",
        egt: "大于等于",
        lt: "小于",
        elt: "小于等于"
      },
      // 展示信息
      showObj: {},
      translateX: 0, // 移动的距离
      startPoint: 0, // 点击的元素其实点
      premitiveLeft: 0, // 记录每次的移动距离
      startWidth: 0, // 实际宽度
      startLeftWrap: 0, // 父级实际宽度
      down: false
    };
  },
  computed: {},
  watch: {
    obj: function(val) {
      this.showObj = val;
      // console.log(val);
    }
  },
  mounted() {
    this.showObj = this.obj;
    window.onmouseup = this.mouseup;
  },
  methods: {
    // 鼠标移动
    mousemove(e) {
      if (this.down) {
        const moveDistance = e.clientX - this.startPoint;
        let translateX = moveDistance + this.premitiveLeft;
        // 如果移动的距离大于了实际宽度 说明是向右移动，到头了
        if (translateX + this.startWidth > this.startWidth) {
          translateX = 0;
        } else if (translateX + this.startWidth <= this.startLeftWrap && this.startWidth > this.startLeftWrap) {
          // 如果移动的距离小于父级容器，向左滑动，到尾了
          translateX = -(this.startWidth - this.startLeftWrap);
        } else  {
          translateX = 0;
        }
        this.translateX = translateX;
      }
    },
    // 鼠标按下
    mousedown(e) {
      this.down = true;
      this.startWidth = this.$refs.list.clientWidth;
      this.startLeftWrap = this.$refs.leftWrap.clientWidth;
      this.premitiveLeft = this.translateX; // 存储每次移动的距离
      this.startPoint = e.clientX; // 起始点击的X轴点坐标
    },
    // 鼠标松开
    mouseup(e) {
      this.down = false;
    },
    /**
     * 删除高级筛选条件
     * @param index
     */
    handleDelete(item, index) {
      this.showObj.obj.splice(index, 1);
      this.showObj.form.splice(index, 1);
      this.$emit("delete", { item: item, index: index, obj: this.showObj });
    },

    /**
     * 商机组展示名称
     */
    getTypesName(data) {
      if (data.typeId) {
        const obj = data.typeOption.find(item => {
          return item.typeId === data.typeId;
        });
        return obj.name || "";
      }
      return "";
    },
    getUserName(data) {
      if (data) {
        return data.map(item => item.realname) || "";
      }
    },
    getStrucName(data) {
      return data.map(item => item.name) || "";
    },
    /**
     * 获取name value 对象展示值
     */
    getNameValue(data) {
      let val = data.value;
      let reName = "";
      let valName = [];
      if (val.length) {
        for (let i = 0; i < val.length; i++) {
          const obj = data.setting.find(item => item.value === val[i]);
          if (obj) valName.push(obj.name);
        }
      } else {
        const obj = data.setting.find(item => item.value === val);
        reName = obj.name;
      }
      if (valName) reName = valName.join(",");
      // console.log(obj,data,'getNameValue')
      return reName ? reName : "";
    },

    /**
     * 商机阶段展示名称
     */
    getStatusName(data) {
      if (data.statusId) {
        const obj = data.statusOption.find(item => {
          return item.statusId === data.statusId;
        });
        if (obj.name) {
          return "-" + obj.name;
        }
        return "";
      }
      return "";
    },

    /**
     * 成交状态名称
     */
    getDealStatus(type) {
      if (type == 0) {
        return "未成交";
      } else if (type == 1) {
        return "已成交";
      }
      return "";
    },

    /**
     * 获取setting数据类型
     */
    getSettingValueType(setting) {
      if (setting && setting.length > 0) {
        const value = setting[0];
        return typeof value;
      }
      return [];
    }
  }
};
</script>

<style scoped lang="scss">
@mixin left() {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background: white;
  font-size: 13px;
  padding: 0 16px 16px;
  user-select: none;
  @include left;
  .tit {
    width: 100px;
    color: #333;
  }
  .left-wrap {
    width: calc(100% - 100px);
    height: 24px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    .list {
      flex-shrink: 0;
      height: 24px;
      position: absolute;
      // @include left;
      .list-item {
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 3px;
        flex-shrink: 0;
        color: #666;
        background-color: #f6f7fc;
        margin-right: 10px;
        display: inline-block;
        // @include center;
        .icon {
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
